<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-27 08:14:02
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-27 09:22:52
 * @FilePath: \后端管理系统\app\src\views\Reports\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <MyBreadcrumb :breadList="$route.meta.breadList" />

    <el-card class="box-card">
      <div id="main"></div>
    </el-card>
  </div>
</template>

<script>
import MyBreadcrumb from "../../components/MyBreadcrumb.vue";
import * as echarts from "echarts";
import { httpReport } from "../../api/report.js";
export default {
  components: {
    MyBreadcrumb,
  },
  data() {
    return {
      options: {
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "",
            type: "bar",
            data: [],
          },
        ],
      },
      myChart:null,
    };
  },
  created() {
    this.initReport();
  },
  methods: {
    async initReport() {
      const res = await httpReport(`reports/type/1`);
      console.log(res);
      this.option={...this.options,...res.data.data}
      this.myChart.setOption(this.option);
    },
  },
  mounted() {
   this.myChart= echarts.init(document.getElementById("main"));
  },
};
</script>

<style>
.box-card {
  margin-top: 20px;
}
#main {
  width: 100%;
  height: 530px;
}
</style>